<template>
  <div>
    <search-bar @onSearch="onSearch"/>
    <div class="buts">
        <el-button type="primary" :icon="Edit" @click="$router.replace('./ItemAdd')">新增商品</el-button>
        <el-upload action="#" accept=".xlsx, .xls" :before-upload="readExcel">
          <el-button type="primary" :icon="Share">批量导入</el-button>
        </el-upload>
    <a href="javascript:;" @click="exportItemTpl">下载模板</a>
  </div>
    <el-table :data="items" style="width: 100%">
    <el-table-column prop="itemName" label="商品名称"/>
    <el-table-column prop="desc" label="商品介绍">
      <template #default="{row}">
        <el-tooltip
        class="box-item"
        effect="dark"
        placement="bottom"
      >
        <template #content>
          <div :style="{width: '500px'}">
            {{ row.desc }}
          </div>
        </template>
          <span>
            {{ row.desc.substr(0,8) + '...' }}
          </span>
      </el-tooltip>
      </template>
    </el-table-column>
    <el-table-column prop="price" label="价格">
      <template #default="{row}">
        <el-tag>
          ￥{{ row.price }}
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="thumb" label="商品图">
      <template #default="{ row }">
          <div>
            <el-image
              :src="row.thumb"
              alt=""
              style="width: 50px; height: 50px"
              :zoom-rate="1.2"
              :preview-src-list="[row.thumb]"
              :initial-index="4"
              fit="cover"
              preview-teleported
            />
          </div>
        </template>
      </el-table-column>
    <el-table-column prop="sale" label="库存">
      <template #default="{row}">
        <el-tag :color="row.sale>500? 'pink':'#c4c8cc'">
          <el-icon v-if="row.sale>500" color="red"><CaretTop/></el-icon>
          <el-icon v-if="row.sale<500" color="red"><CaretBottom/></el-icon>
          {{ row.sale }}
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="onsale" label="上下架">
      <template #default="{ row }">
          <div>
            <el-switch
              v-model="row.onsale"
              class="ml-2"
              inline-prompt
              style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
              active-text="上架"
              inactive-text="下架"
            />
          </div>
        </template>
      </el-table-column>
    <el-table-column prop="createAt" label="添加时间" />
    <el-table-column prop="detaName" label="操作">
      <el-button @click="upitemdate">详情</el-button>
  </el-table-column>
  </el-table>
  <el-pagination class="page"
    layout="prev, pager, next, jumper, sizes"
    v-model:page-size="pageSize"
    v-model:current-page="page"
    :total="total" />
  </div>
</template>

<script>
import { getItemLists, addItems } from '@a/itemLists'
import SearchBar from '@c/SearchBar.vue'
import { utils, writeFileXLSX, read} from 'xlsx'
// import { fetchCates, delCates } from '@a/cateLists'
export default {
  name: 'ItemLists',
  data () {
    return {
      items: [],
      page: 1,
      pageSize: 10,
      total: 0,
      addModalShow: true
      // searchParams: {}
    }
  },
  methods: {
    upitemdate (id) {
      this.$router.push({
        path: '/ItemUpdate',
        query: {
          id
        }
      })
    },
    readExcel (file) {
      // 读取xlsx
      const fd = new FileReader()
      // 将文件解析为readAsArrayBuffer
      fd.readAsArrayBuffer(file)
      fd.onload = () => {
        // 文件读取完成触发
        const wb = read(fd.result)
        const data = utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]])
        const _data = data.map(item => {
          return {
            itemName: item.商品名,
            price: item.价格,
            desc: item.商品描述
          }
        })
        // 请求批量添加商品的接口
        addItems({
          items: _data
        }).then(res => {
          if (res.data.code === 200) {
            this.$message({
              type: 'success',
              message: res.data.msg
            })
            this.$router.go(0)
          }
        })
      }
      return false
    },
    onSearch (searchParams) {
      this.searchParams = searchParams
      this.fetchItems()
    },
    exportItemTpl () {
      const addExport = [
        {
          商品名: '名称',
          商品价格: 10,
          商品描述: '这是描述'
        }
      ]
      const ws = utils.json_to_sheet(addExport)
      const wb = utils.book_new()
      utils.book_append_sheet(wb, ws, 'Data')
      writeFileXLSX(wb, '商品模板.xlsx')
    },
    fetchItems () {
      getItemLists({
        page: this.page,
        pageSize: this.pageSize,
        ...this.searchParams
      }).then(res => {
        if (res.data.code === 200) {
          this.items = res.data.data.lists
          this.total = res.data.data.total
        }
      })
    }
  },
  watch: {
    page () {
      this.fetchItems()
    },
    pageSize () {
      this.fetchItems()
    }
  },
  created () {
    this.fetchItems()
  },
  components: {
    SearchBar
  }
}
</script>

<style lang="scss" scoped>
.page{
    margin: 10px 25%;
  }
.buts{
  display: flex;
}
</style>
